import React from 'react';
import { connect } from 'dva';
import { Button, Table, Form, Input, Popconfirm,DatePicker, Select,TreeSelect,   } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const TreeNode = TreeSelect.TreeNode;
const RangePicker = DatePicker.RangePicker;
import ResourceModal from '../../components/resource/ResourceModal';
import ShowAssetModal from '../../components/resource/ShowAssetModal';

function Resource({ dispatch, resource, loading, form }) {
    
    const { getFieldDecorator, getFieldsValue, getFieldValue } = form;
    const { currentItem, modalVisible, modalType,ipParamIdList,resourceGroupIdList} = resource

    const columns = [{
        title: '资源名称',
        dataIndex: 'name',
        key: 'name',
        width: 120,
    },{
        title: 'IP地址',
        dataIndex: 'ip',
        key: 'ip',
        width: 100,
    },{
        title: '业务应用',
        dataIndex: 'businessApplication',
        key: 'businessApplication',
        width: 100,
    },{
        title: '资源组名称',
        dataIndex: 'resourceGroupName',
        key: 'resourceGroupName',
        width: 100,
        render: (text, record) => (
            <span>   
                <a onClick={showResourceGroupView.bind(null, record.resourceGroupId_)}>{record.resourceGroupName}</a>
            </span>
        ),
    },{
        title: '安全网关',
        dataIndex: 'securityDomain',
        key: 'securityDomain',
        width: 80,
    },{
        title: '操作',
        key: 'operation',
        width: 60,
        render: (text, record) => (
            <span>   
                <a onClick={editHandler.bind(null, record.id_)}>编辑</a>
                <span className="ant-divider" />
                <Popconfirm title="确认删除？" onConfirm={deleteHandler.bind(null, record.id_)}>
                <a>删除</a>
                </Popconfirm>
            </span>
        ),
    }];

    const pagination = {
        current:resource.current,
        pageSize:resource.currentSize,
        total: resource.total,
        showSizeChanger: true,
        showTotal: (total => '共' + resource.total + '条'),
        onShowSizeChange(current, size) {
            dispatch({
                type: 'resource/queryList',
                payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':size} },
            });
        },
        onChange(current) {
            dispatch({ 
                type: 'resource/queryList', 
                payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':resource.currentSize} },
            });
        },
    };

    //删除事件
    function deleteHandler(id) {
        dispatch({
            type: 'resource/remove',
            payload: {id:id,search:{...getFieldsValue(),...{'pageNum':resource.current, 'pageSize':resource.currentSize}},},
        });
    }

    //查看对象
    const editHandler = (id, values) => {
        dispatch({
            type: 'resource/qryById',
            payload:id,
        });
    }
    const showResourceGroupView = (id) =>{
        dispatch({
            type: 'resource/onViewItem',
            payload:id,
        })
    }
    //查询事件
    const submitHandle = () => {
        dispatch({
            type: 'resource/queryList',
            payload: { ...getFieldsValue() },
        });
    }
    //清空查询条件
    function handleClear(){
      form.resetFields();
    }

   //点击新增按钮
    const addHandler = () => {  
        dispatch({
            type: 'resource/showModal',
            payload: {
                modalType: 'create',
            },
        })
    }
    
    const modalProps = {
        item: resource.currentItem,   
        visible: modalVisible,
        type: modalType,
        ipParamIdList:ipParamIdList,
        resourceGroupIdList:resourceGroupIdList,
        maskClosable: false,    
        dispatch: dispatch,
        confirmLoading: loading,
        title: '新增资源',
        wrapClassName: 'vertical-center-modal',
        newKey : resource.newKey,
        onOk (data) {
            dispatch({
                type: `resource/${modalType}`,
                payload: {data:data,search:{...getFieldsValue(),...{'pageNum':resource.current, 'pageSize':resource.currentSize}}},
            })
        },
        onCancel () {
            dispatch({
                type: 'resource/hideModal',
                payload:{currentItem:{}},
            })
        },            
    }

    const viewModalProps = {
        item: resource.viewItem,
        visible: resource.viewModalVisible,
        maskClosable: false,
        dispatch: dispatch,
        viewList:resource.viewList,
        ipParamIdList:resource.ipParamIdList,
        confirmLoading: loading,
        title: '查看资源',
        wrapClassName: 'vertical-center-modal',
        newKey: resource.newKey,
        onCancel() {
            dispatch({
                type: 'resource/hideViewModal',
            })
        },
    }
    return (
        <div style={{width:'auto',height:document.body.clientHeight - 77,position:'relative',backgroundColor:'#fff'}}>
          <div style={{minHeight:'100%'}}>
              <div style={{width:'100%',height:'40px',backgroundColor:'#fff',lineHeight:'40px',paddingLeft:'20px',paddingTop:'10px'}}>
                  <Form layout="inline" >            
                    <FormItem>
                       {getFieldDecorator('name')(
                          <Input type="text" placeholder="资源名称" style={{ width:'200px' }} />
                        )}
                    </FormItem>
                    <FormItem>
                        {getFieldDecorator('ip')(
                            <Input type="text" placeholder="ip地址" style={{ width:'200px' }} />
                        )}
                    </FormItem>
                    <FormItem>
                        {getFieldDecorator('businessApplication')(
                            <Input type="text" placeholder="业务应用" style={{ width:'200px' }} />
                        )}
                    </FormItem>
                    <FormItem>
                        <Button type="primary" size='large' onClick={submitHandle} className='ant-search-btn'>查询</Button>   
                    </FormItem>
                    <FormItem>
                        <Button size="large" htmlType="reset" onClick={handleClear}>清空</Button>
                    </FormItem>

                    <div style={{marginTop:'-40px',textAlign:'right',paddingRight:'10px'}}> 
                        <FormItem>
                            <Button type="primary" size='large' onClick={addHandler}>新增资源</Button>
                        </FormItem>
                    </div>

                </Form>    
            </div>       
            <div style={{width:'100%',height:'100%',paddingLeft:'20px',paddingTop:'30px',paddingRight:'20px'}}>
                <Table columns={columns} rowKey={record => record.id_} loading={loading} dataSource={resource.list} pagination={pagination} 
                    scroll={{ y: document.body.clientHeight - 238}}
                />
            </div>
            </div>
            <ResourceModal {...modalProps} />
            <ShowAssetModal {...viewModalProps}/>
        </div>
    );
}

function mapStateToProps(state) {
  return { resource : state.resource,loading:state.loading.models.resource};
}

Resource = Form.create()(Resource);

export default connect(mapStateToProps)(Resource);